<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
<<<<<<< HEAD
        .sty {
            border: 1px green solid;
        }
        
        .sty1 {
            border: 1px red solid;
        }
        
        .myfont {
            font-weight: bold;
            font-size: 60px;
=======
        .mycolor {
            color: blueviolet;
>>>>>>> 19f1947581ea49b3afc6dc1e670e060ad9ba58c1
        }
    </style>
</head>

<body>
<<<<<<< HEAD
    <h1>第十一次作业</h1>
    <div id="div1" style="color: pink;" class="sty" title="div1">
        这是个div1
        <div id="div2">这是个div2</div>
        <div id="div3">这是个div3</div>
        <div id="div4">这是个div4</div>
    </div>

    <div id="div5" style="color: pink;" class="sty" title="div1">
        这是个div5
        <div id="div6">这是个div6</div>
        <div id="div7">这是个div7</div>
        <div id="div8">这是个div8</div>
    </div>
    <img src="../image/caomei.png" width="300px" height="300px">
    <input id="username">
    <script>
        //js操作属性一
        let div1 = document.getElementById("div1")
        div1.title = "XXXXX"
        div1.style.color = "blue"
        div1.style.backgroundColor = "pink"
        div5.style.backgroundColor = "blue"
        console.log(div1.title)
            //js操作属性二
        div1.setAttribute("title", "ZZZZ")
        let text = div1.getAttribute("title")
        console.log(text)

        let img = document.getElementsByTagName("img")[0]
        img.setAttribute("src", "../image/cat.png")

        //js操作样式1
        div1.style.color = "blue"
        img.style.border = "5px pink solid"
        img.style.borderRadius = "20px"

        //js操作样式2
        // div1.className = "sty sty1"
        // div1.classList.add("sty1")
        // div1.classList.add("myfont")

        console.log(div1.classList)
            // div1.classList.remove("myfont")

        div1.classList.toggle("myfont")

        let bool = div1.classList.contains("myfont")
        console.log(bool)
            //1.鼠标点击事件
            // div1.onclick = ()=>{
            //     console.log("12345")
            //     div1.classList.toggle("myfont")
            // }
            //监听事件的方式一
            // div1.addEventListener("click",function(){
            //     console.log("12345")
            //     div1.classList.toggle(myfont)
            // })
            //监听事件的方式二(常用)
            // div1.addEventListener("click", function(e) {
            //     console.log(e.target)
            // })
            // img.addEventListener("click", function(e) {
            //         console.log(e.target)
            //     })
            //事件的捕获和冒泡
            //(1)冒泡(从发生事件的元素开始开始逐级向上传播到目标元素)
        document.getElementById("div1").addEventListener("click", function() {
            console.log(event.target.textContent + "被点击了");
        });
        document.getElementById("div4").addEventListener("click", function() {
            console.log(event.target.textContent + "被点击了");
        });
        //(2)捕获 （从 document开始逐级向下传播到目标元素)
        document.getElementById("div5").addEventListener("click", function() {
            console.log(event.target.textContent + "被点击了");
        }, true);
        //点击变换图片大小
        img.onclick = () => {
                console.log("1111")
                img.style.width = '100px'
                img.style.height = '100px'
            }
            //鼠标处于图片内的移入、移出、移动
        img.addEventListener("mouseenter", function() {
            console.log("进入图片区域")
        })
        img.addEventListener("mouseleave", function() {
            console.log("离开图片区域")
        })
        img.addEventListener("mousemove", function() {
            console.log("在图片区域中移动")
        })

        img.addEventListener("keydown", () => {
            console.log("键盘按下了某个按键")
        })

        let username = document.getElementById("username")
        username.addEventListener("keyup", (event) => {
            console.log("某个按键按下并且抬起了", event.key, event.code)
        })

        username.addEventListener("keydown", () => {
            console.log("键盘按下了某个按键")
        })
    </script>
</body>
</body>
=======
    <div id="div1" class="mycolor">
        AAA
    </div>
    <div id="div2">

    </div>
    <div id="div4">
        <p id="p1">ppp</p>
        <span id="span1">122223333</span>
    </div>
    <ul>
        <li>炒面</li>
        <li>煎饼</li>
        <li id="apple">苹果</li>
        <li>水果</li>
    </ul>
    <script>
        let div1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>1234</p>"

        let myEle = document.createElement("h1")
        myEle.innerText = "547"
        div1.appendChild(myEle)

        let myEle1 = document.createElement("div")
        myEle1.innerHTML = "这个是我创建的div"
        div1.append(myEle, myEle1)

        div1.append("<h2>666</h2>")
        let div2 = document.querySelector("#div2")
        console.log(div2)

        let div3 = document.querySelector(".mycolor")
        console.log(div3)

        let divs = document.getElementsByTagName("div")
        console.log(divs)
        divs[1].append("123123")

        let p1 = document.getElementById("p1")
        let myEle2 = document.createElement("h3")
        myEle2.innerHTML = "这个是h3"
        p1.before(myEle2)
        let myEle3 = document.createElement("h4")
        myEle3.innerHTML = "h4标题"
        p1.after(myEle3)
        let span1 = document.getElementById("span1")
        span1.remove()
        let list = document.getElementsByTagName("ul")
        console.log(list)
            // for (item of list[0].children) {
            //     item.innerHTML = "苹果"
            //     // } 
            // console.log(list[0].firstElementChild.nextSibling)
            // list[0].children[0]
            // console.log(p1.parentElement)
            // div3.removeChild(p1)
        let apple = document.getElementById("apple")
        apple.remove()
    </script>
</body>
>>>>>>> 19f1947581ea49b3afc6dc1e670e060ad9ba58c1

</html>